import React, { useState, forwardRef } from 'react';
import { Form, Row, Col, Button, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import styles from './index.less';

const BasicForm = forwardRef(
  ({ form, formItems, initialValues, onFinish, onReset }, ref) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => {
      setIsExpanded(!isExpanded);
    };

    const renderFormItems = () => {
      if (isExpanded) {
        return formItems.map((item, index) => (
          <Col span={8} key={index}>
            {item}
          </Col>
        ));
      }

      const visibleItems = formItems.slice(0, 3);
      return visibleItems.map((item, index) => (
        <Col span={8} key={index}>
          {item}
        </Col>
      ));
    };

    return (
      <Form
        form={form}
        initialValues={initialValues}
        onFinish={onFinish}
        onReset={onReset}
        style={{ maxWidth: 'none', padding: '0px 24px 16px ' }}
      >
        <Row gutter={16}>{renderFormItems()}</Row>

        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Space size="small">
            <Button htmlType="reset">重置</Button>

            <Button type="primary" htmlType="submit">
              查询
            </Button>

            {formItems.length > 3 && (
              <a
                style={{
                  fontSize: 12,
                }}
                onClick={toggleExpand}
              >
                {isExpanded ? '收起' : '展开'}
                <DownOutlined rotate={isExpanded ? 180 : 0} />
              </a>
            )}
          </Space>
        </div>
      </Form>
    );
  },
);

export default BasicForm;
